<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.3.0" data-semver="1.3.0" src="https://code.angularjs.org/1.3.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="mainCtrl" class="container">
    <h1>Structural Directives</h1>

    <h4 ng-if="showSubtitle">They modify the structure of the DOM</h4>
    <input type="checkbox" ng-model="showSubtitle" /> Show Subtitle

    <h4>People</h4>
    <ul> 
      <li ng-repeat="person in people">{{person}}</li>
    </ul>

    <h4>Quality</h4>
    <div ng-switch on="quality">
      <div ng-switch-when="good">
        Episodes IV, V, VI
      </div>
      <div ng-switch-when="bad">
        Episodes I, II, III
      </div>
    </div>
    
    <input type="radio" name="quality" ng-model="quality" value="good" /> Good
    <input type="radio" name="quality" ng-model="quality" value="bad" /> Bad
    
    
  </body>

</html>
